<template>
  <div id="home">
    <!-- 头部区域 -->
    <NavBar>
      <template v-slot:default>天天图书</template>
    </NavBar>
    <TabControl v-show="isShowBackTop" :titles="['畅销','新书','精选']" @tabClick="tabClick"></TabControl>


    <div class="wrapper" ref="wrapper">
      <div class="content">
        <div ref="banref">
        <!-- banner 区域 (轮播图)-->
          <HomeSwiper :banners="banners"></HomeSwiper>
        <!-- 推荐图书区域 -->
        <RecommendView :recommends="recommends"></RecommendView>
        </div>
       
        <!-- 选项卡区域 -->
        <TabControl :titles="['畅销','新书','精选']" @tabClick="tabClick"></TabControl>
        <!-- 图书列表区域 -->
        <GoodsList :goods="showGoods"></GoodsList>
      </div>
    </div>
    <!-- 返回顶部 -->
    <BackTop v-show="isTabFiexd" @bTop="bTop"></BackTop>
    
    
  </div>
</template>

<script>
import { getHomeAllData, getHomeGoods } from 'network/home.js'
import { computed, nextTick, onMounted, reactive, ref, watchEffect } from 'vue'
import BSCroll from 'better-scroll'
import Pullup from '@better-scroll/pull-up'
import HomeSwiper from 'views/home/ChildComps/HomeSwiper.vue'
import BackTop from 'components/common/backtop/BackTop.vue'
import NavBar from 'components/common/navbar/NavBar.vue'
import RecommendView from './ChildComps/RecommendView.vue'
import TabControl from 'components/content/tabControl/TabControl.vue'
import GoodsList from 'components/content/goods/GoodsList.vue'

export default {
  name: 'Home',
  setup() {
    let banref = ref(null)
    let isShowBackTop = ref(false)
    let isTabFiexd = ref(false)
    // 推荐商品列表
    const recommends = ref([])
    const banners = ref([])
    // 商品列表数据模型
    const goods = reactive({
      sales: {page: 1, list: []},
      new: {page: 1, list: []},
      recommend: {page: 1, list: []}
    })

    // 定义切换的类型，默认为 sales
    let currentType = ref('sales')

    let bscroll
    const wrapper = ref(null);

    // 动态计算传给 GoodsList 组件的图书列表
    const showGoods = computed(()=>{
      return goods[currentType.value].list
    })


    // 在页面加载完成时，请求商品数据，获取推荐商品列表
    onMounted(async () =>{
      const data = await getHomeAllData()
      recommends.value = data.goods.data
      banners.value = data.slides

      // 请求 畅销图书数据
      const salesData = await getHomeGoods('sales')
      goods.sales.list = salesData.goods.data
      // 请求 新书图书数据
      const newData = await getHomeGoods('new')
      goods.new.list = newData.goods.data
      // 请求 精选图书数据
      const recommendData = await getHomeGoods('recommend')
      goods.recommend.list = recommendData.goods.data


      // 创建 BetterScroll 对象
      bscroll = new BSCroll(wrapper.value, {
        // 获取到最外层元素
        probeType: 3, // 0,1,2,3, 3 只要在运行就触发 scroll 事件
        click: true, // 是否允许点击
        pullUpLoad: true, // 上拉加载更多，默认 false
      })
      // 触发滚动事件
      bscroll.on('scroll', (position)=>{
        // console.log(banref.value.offsetHeight);
        // console.log(position.y);
        isShowBackTop.value = isTabFiexd.value = (-position.y) > banref.value.offsetHeight
      })

      // 上拉加载数据，触发 pullingUp
      bscroll.on('pullingUp', ()=>{
        // 获取分页数据
        let page = goods[currentType.value].page + 1
        // 重新请求数据
        getHomeGoods(currentType.value, page).then(res=>{
          goods[currentType.value].list.push(...data.goods.data)
          goods[currentType.value].page += 1
        })
        // 完成上拉，等数据请求完成，要将新数据展示出来
        bscroll.finishPullUp();
        // 重新计算高度
        bscroll.refresh()
      })
    }) 

    // 接收 TabControl 组件的选项卡索引值
    const tabClick = (index)=>{
      // 定义一个类型数组，根据索引，动态的赋值
      let types = ['sales', 'new', 'recommend']
      currentType.value = types[index]
      nextTick(()=>{
        // 重新计算高度
       bscroll &&  bscroll.refresh()
      })
    }

    // 监听任何一个变量有触发
    watchEffect(()=>{
      nextTick(()=>{
        // 重新计算高度
       bscroll &&  bscroll.refresh()
      })
    })

    // 回到顶部
    const bTop = () => {
      bscroll.scrollTo(0, 0, 500)
    }


    return {
      recommends,
      tabClick,
      goods,
      showGoods,
      wrapper,
      banref,
      isTabFiexd,
      isShowBackTop,
      bTop,
      banners,

    }
  },
  components:{
    NavBar,
    RecommendView,
    TabControl,
    GoodsList,
    BackTop,
    HomeSwiper,
  }
}
</script>

<style scoped>
.banners img {
  width: 100%;
  height: auto;
}
#home {
  height: 100vh;
  position: relative;
}
.wrapper {
  position: absolute;
  top: 45px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>
